/*******************
测评-统计分析
* */
<template>
  <basic-container style="overflow: auto;padding-bottom: 50px;"  >
    <el-row class="backtop"  style="padding: 0 20px; background: #FBFBFD;height: 800px;overflow-y: auto" v-loading="fullscreenLoading">

      <el-row>
        <div style="height: 50px; border-bottom: 1px solid #b0bde2">

            <el-button plain type="primary" @click="openImport">获取数据</el-button>

        </div>

      </el-row>
      <el-row >
        <div   style="width:100%; height:350px;margin-top: 10px;">

          <el-carousel :interval="5000" arrow="always" v-if="showBarChart">
            <el-carousel-item v-for="(item,index) in djList" :key="index">

              <bar-chart  :name="item.name"  :seriesData="item.dj"></bar-chart>

            </el-carousel-item>
          </el-carousel>

          <bar-chart-detail :detailData="detailData"  v-if="showBarDetail"></bar-chart-detail>
        </div>


        <el-table
          style="width: 100%;"
          :data="dataList"
          border
          ref='tTable'
          highlight-current-row
          header-align="center"
          v-loading="dataListLoading"
          @row-click="handleClick"
          @current-change="selectRow"
        >
          <el-table-column type="index"  align="center" label="序号" min-width="80" ></el-table-column>
          <el-table-column prop="bm" label="部门" align="center" min-width="250" show-overflow-tooltip ></el-table-column>
          <el-table-column prop="xm" align="center" label="姓名" min-width="160" show-overflow-tooltip></el-table-column>
          <el-table-column prop="zw" align="center"  min-width="400" label="职务" show-overflow-tooltip></el-table-column>
          <el-table-column prop="zhdf" align="center" label="综合得分" min-width="160" show-overflow-tooltip></el-table-column>
          <el-table-column prop="dj"  align="center"  label="测评结果" min-width="120" show-overflow-tooltip></el-table-column>
        </el-table>

      </el-row>
      <el-backtop target=".backtop" :visibility-height=100></el-backtop>
    </el-row>
    <el-dialog width="40%" title="导入" :visible.sync="innerVisible" append-to-body>
      <el-row class="mb10" style="height: 10vh;" :gutter="10">
        <el-col :span="4">
          <el-upload
            style="margin-left: 8px;"
            class="upload-demo"
            action
            :on-change="handleChange"
            :show-file-list="false"
            :on-remove="handleRemove"
            :file-list="fileListUpload"
            :limit="limitUpload"
            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            :auto-upload="false"
            ref="uploadversion"
          >
            <el-button type="primary" plain class="fr">导入</el-button>
          </el-upload>
        </el-col>
      </el-row>
    </el-dialog>
  </basic-container>
</template>

<script>

import { mapGetters, mapState } from "vuex";
import store from "@/store";
import barChart from "@/views/statisticsanalysis/cepingDept/barChart";
import barChartDetail from "@/views/statisticsanalysis/cepingDept/barChartDetail";

import {getAllCepingList,addImport,getAllCepingFzList} from "@/api/statisticsanalysis/allStatistics";
import XLSX from "xlsx";
export default {
  data() {
    return {
      headers: {
          Authorization: "Bearer " + store.getters.access_token
      },
      choosePerOrDept: 0,
      showBarChart:true,
      showBarDetail:false,

      appealForm: {}, //申诉表单对象
      appealVis: false, //申诉弹窗
      searchheight: "0", //搜索组件的高度
      searchadvanced: true, //搜索的显隐
      searchForm: {}, //搜索对象
      dataListLoading: false, //表格是否加载
      dataList: [], //表格数组
      formData:{},
      multipleSelection: [], //勾选数据



      detailData:{},
      pieData:[],
      assessParticipantId: null, //后台需要的考核id
      fullscreenLoading:false,
      innerVisible: false,
      dialogVisible: false,
      fileListUpload: [],
      limitUpload: 3,
      accountList: [],
      djList:[],
    };
  },
  mounted() {

  },
  computed: {
      ...mapGetters(["permissions"])
  },
  components: {
   /* barChart,
    barChartDetail,
    pieChart*/
    barChart,
    barChartDetail
  },
  created() {

    this.getDataList();

  },
  methods: {
    openImport() {
      this.innerVisible = true;
    },
    exportXlsx() {
      this.$message.closeAll();
      this.$message.success("下载成功!");
      window.location.href = "../../static/ryyjkinfo.xlsx";
    },
    // excel表上传
    handleChange(file, fileList) {
      this.fileTemp = file.raw;
      let fileName = file.raw.name;
      let fileType = fileName.substring(fileName.lastIndexOf(".") + 1);
      // 判断上传文件格式
      if (this.fileTemp) {
        if (fileType == "xlsx" || fileType == "xls") {
          this.importf(this.fileTemp);
          this.innerVisible = false;

        } else {
          this.$message({
            type: "warning",
            message: "附件格式错误，请删除后重新上传！"
          });
        }
      } else {
        this.$message({
          type: "warning",
          message: "请上传附件！"
        });
      }
    },
    //导入的方法
    importf(obj) {
      this.dialogVisible = true;
      let _this = this;
      let inputDOM = this.$refs.inputer; // 通过DOM取文件数据
      this.file = event.currentTarget.files[0];
      var rABS = false; //是否将文件读取为二进制字符串
      var f = this.file;
      var reader = new FileReader();
      //if (!FileReader.prototype.readAsBinaryString) {
      FileReader.prototype.readAsBinaryString = function(f) {
        var binary = "";
        var rABS = false; //是否将文件读取为二进制字符串
        var pt = this;
        var wb; //读取完成的数据
        var outdata;
        var reader = new FileReader();
        reader.onload = function(e) {
          var bytes = new Uint8Array(reader.result);
          var length = bytes.byteLength;
          for (var i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
          }
          var XLSX = require("xlsx");
          if (rABS) {
            wb = XLSX.read(btoa(fixdata(binary)), {
              //手动转化
              type: "base64"
            });
          } else {
            wb = XLSX.read(binary, {
              type: "binary"
            });
          }
          // outdata就是你想要的东西 excel导入的数据
          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
          // excel 数据再处理
          let arr = [];
          let temp1 = [];
          outdata.map(v => {
            // let jsonString = JSON.stringify(v).replace(/\*/g, '').replace(/\s/ig,'');
            let jsonString = JSON.stringify(v)
              .replace(/\//g, "")
              .replace(/\s/gi, "");
            //debugger;
            v = JSON.parse(jsonString);
            temp1.push(v);
          });

          addImport(temp1).then(r => {
            //console.log(r);
            if(r.data.data.length != 0){
              _this.$message.success("导入成功");
              _this.getDataList();
            }else{
              _this.$message.success("导入失败");
            }

            //_this.mainDept = [..._this.mainDept, ...peon];
          }).catch(error => {
            console.log(error);
          });
        };
        reader.readAsArrayBuffer(f);
      };
      if (rABS) {
        reader.readAsArrayBuffer(f);
      } else {
        reader.readAsBinaryString(f);
      }

      let uploadFilesArr = this.$refs.uploadversion.uploadFiles; //上传文件列表
      if(uploadFilesArr.length ==0){
      }else{
        this.$refs.uploadversion.uploadFiles =[]

      }
    },
    // 移除excel表
    handleRemove(file, fileList) {
      this.fileTemp = null;
    },
    selectRow(row) {
      if (row) {
        this.$refs.tTable.setCurrentRow(row, true);
      } else {
        this.$refs.tTable.setCurrentRow();  // 取消高亮
      }
    },
    changeDate() {
      if (
        this.searchForm.kssj != null &&
        this.searchForm.kssj != "" &&
        this.searchForm.kssj != undefined ||
        this.searchForm.jssj != null &&
        this.searchForm.jssj != "" &&
        this.searchForm.jssj != undefined
      ) {
        if (this.searchForm.kssj > this.searchForm.jssj) {
          this.$message.warning('开始日期不能小于结束日期')
          this.searchForm.jssj="";
        } else {
          //sucess
        }
      }
    },
    // 查询条件的展开关闭
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if (this.searchadvanced) {
        this.searchheight = "auto";
      }
    },
    // 查询列表
    getDataList() {
       this.dataListLoading = true ;
       this.showBarDetail = false;

       this.showBarChart = true;

      getAllCepingList()
      .then(r => {

        if (r.data.code == 0) {
          this.dataList = r.data.data;
          this.dataListLoading = false ;

         }
        })
        .catch(err => {});
      this.djList = [];
      getAllCepingFzList()
        .then(r => {
          if (r.data.code == 0) {

            r.data.data.map((it) => {
                let arrObj ={
                  name:it.dj,
                  dj:it.cepingReportList,
                }
                this.djList.push(arrObj);
            })
          }

        })
        .catch(err => {});
    },
    //选人添加到右边的框
    handleClick(vm) {
      this.showBarDetail = true;
      this.showBarChart = false;
      this.detailData = vm;
    },
  }
};
</script>

<style lang="scss" scoped>
//表格鼠标悬停的样式（背景颜色）
/deep/ {
  .el-table {
    tbody tr {
      &:hover {
        td {
          background-color: rgb(236,245,255);
        }
      }
    }
  }
}
//表格鼠标悬浮时的样式 （高亮）
/deep/ {
  .el-table--enable-row-hover {
    .el-table__body tr {
      &:hover {
        background: rgb(236,245,255);
        border: 1px solid #313463;
      }
    }
  }
}

</style>
